<template>
    <div class="other c-title-4">
        {{ $t("message.Global.comm.otherLogin") }}
        <!-- 第三方登录 -->
    </div>
    <div class="btns c-title-4">
        <div class="j-btn" size="small" @click="onTwitter">
            <img :src="twitter" class="imgs" />
            {{ $t("message.Global.comm.Twitter") }}
        </div>
        <div class="j-btn" size="small" @click="onGoogle">
            <img :src="google" class="imgs" />
            {{ $t("message.Global.comm.Google") }}
        </div>
    </div>
    <!-- <v-row>
        <v-col><v-btn class="j-btn" size="small" color="#3C424C" @click="onTwitter">
                <template v-slot:prepend>
                    <img :src="twitter" class="imgs" />
                </template>
                {{ $t('message.Global.comm.Twitter') }}
            </v-btn></v-col>
        <v-col><v-btn class="j-btn" size="small" color="#3C424C" @click="onGoogle">
                <template v-slot:prepend>
                    <img :src="google" class="imgs" />
                </template>
                {{ $t('message.Global.comm.Google') }}
            </v-btn></v-col>
    </v-row> -->
</template>

<script lang="ts" setup>
import facebook from "@/assets/Login_facebook.png";
import google from "@/assets/Login_google.png";
import twitter from "@/assets/Login_twitter.png";
import { URL_LOGIN_TWITTER } from "@/comm/api";
import { get } from "@/comm/request";
import { toast } from "@/components/toast/toast";
import { useAccount } from "@/stores/account";
import { useLogin } from "@/hooks/useLogin";
import { useLayout } from "@/stores/layout";
import { useUser } from "@/stores/user";
const account = useAccount();
const layout = useLayout();
const user = useUser();
const { loginGoogle, loginTwitter } = useLogin();

const onGoogle = () => {
    loginGoogle();
    check()
};

function check() {
    if (layout.isMobile) {
        setTimeout(async () => {
            await user.getUserInfo();
            if (user.info) {
                location.href = "/reward"
            }
            else{
                check();
            }
        }, 5000)
    }
}

const onFacebook = () => { };

const onTwitter = () => {
    loginTwitter();
    check()
};
</script>

<style lang="less" scoped>
.j-btn {
    text-transform: capitalize;
    width: 100%;
    height: 40px !important;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--border);
    border-radius: 4px;
    cursor: pointer;

    .imgs {
        margin-right: 10px;
    }

    &:hover {
        background: var(--main);
        color: #000;

        .imgs {
            filter: invert(100%);
        }
    }
}

.other {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    &:before,
    &:after {
        content: "";
        display: block;
        flex: 1;
        height: 1px;
        background: #3f454f;
    }

    &:before {
        margin-right: 10px;
    }

    &:after {
        margin-left: 10px;
    }
}

.imgs {
    width: 20px;
    height: 20px;
}</style>
